<template>
  <div class="tab-header">
    <div
      class="header-item"
      :class="{ active: item.key === activeTab }"
      v-for="item in tabList"
      :key="item.key"
      @click="activeTab = item.key"
    >
      {{ item.name }}
    </div>
  </div>
  <div class="tab-list">
    <GoodItem
      v-for="item in filterPackItemList"
      :key="item.id"
      :item="item"
      :choseList="choseList"
      @choseItem="handleChoose"
    ></GoodItem>
  </div>
  <span v-if="!filterPackItemList.length">暂无物品</span>
  <div class="extra">
    <div class="text-btn-sell" @click="handleGive">确认给予</div>
    <input
      class="giveMoney"
      type="number"
      v-model="giveMoney"
      :max="userMoney"
      @input="checkMoney(giveMoney)"
    />
    <div class="money">{{ userMoney }}<i class="ewg-icon-jinbi"></i></div>
  </div>
</template>
<script lang="ts">
import { useStore } from "@/store";
import { computed, defineComponent, ref } from "vue";
import GoodItem from "./GoodItem.vue";
import { WsDTO } from "@/const/ws";
import { SysActionTypes } from "@/store/sys/action-types";
import { tradeType } from "@/const/trade";
import { confirm } from "@/util/confirm";
import { MutationTypes } from "@/store/player/mutation-types";
import { OptionsDataType } from "@/const/indexedDB";
import { SysInfo } from "@/const/sys";

const store = useStore();
export default defineComponent({
  name: "TabBox",
  components: {
    GoodItem
  },
  props: ["targetId"],
  setup(props: any) {
    const activeTab = ref("equipment");
    const packItemList = computed(() => {
      return store.state.userPackage;
    });
    const filterPackItemList = computed(() => {
      return packItemList.value.filter(m => {
        if (activeTab.value === "all") {
          return true;
        } else {
          return m.type === activeTab.value;
        }
      });
    });
    const giveMoney = ref(0);
    const userMoney = computed(() => {
      return store.state.userInfo.money;
    });
    const list: any[] = [];
    const choseList = ref(list);
    const playerListIds = computed(() => {
      return store.state.onlinePlayers.map(({ id }) => id);
    });
    const handleGive = async () => {
      const money = +giveMoney.value;
      if (!choseList.value.length && !money) return;
      const res = await confirm(
        "给予物品请保证操作过程中双方一直在线（如遇中途上下线需从玩家列表重新选择给予对象），丢失物品概不负责，是否给予？"
      );
      if (res) {
        const body = {
          tradeType: tradeType.GIVE,
          equipments: choseList.value,
          money
        };
        const data = new WsDTO(
          store.state.userInfo.userName,
          body,
          2,
          props.targetId
        ).ObjectToString();
        if (!playerListIds.value.includes(props.targetId)) {
          store.dispatch(
            SysActionTypes.SYS_PUSH_INFO,
            new SysInfo("对方已下线", 1)
          );
          return;
        }
        store.dispatch(SysActionTypes.SYS_WS_SEND, data);
        if (money) {
          store.commit(MutationTypes.MAKE_MONEY, -money);
          giveMoney.value = 0;
        }
        if (choseList.value.length) {
          choseList.value.forEach(async (m: any) => {
            store.commit(MutationTypes.REMOVE_ITEM_TO_PACKAGE, m.id);
            const params: OptionsDataType = {
              index: m.id
            };
            store.dispatch(SysActionTypes.SYS_DEL_EQUIP, params);
          });
          choseList.value = [];
        }
        store.dispatch(
          SysActionTypes.SYS_PUSH_INFO,
          new SysInfo("你要给的东西已经发过去了", 2)
        );
      }
    };
    const checkMoney = (v: number) => {
      if (v && v > userMoney.value) {
        giveMoney.value = userMoney.value;
      }
    };
    const handleChoose = (row: any) => {
      const index = choseList.value.findIndex(
        ({ id }: { id: number }) => id === row.id
      );
      if (index === -1) {
        choseList.value.push(row);
      } else {
        choseList.value.splice(index, 1);
      }
    };
    return {
      activeTab,
      packItemList,
      filterPackItemList,
      userMoney,
      choseList,
      handleGive,
      giveMoney,
      checkMoney,
      handleChoose,
      tabList: [
        // {
        //   key: "all",
        //   name: "全部"
        // },
        {
          key: "equipment",
          name: "装备栏"
        }
        // {
        //   key: "consumables",
        //   name: "消耗品"
        // }
      ]
    };
  }
});
</script>
<style lang="scss" scoped>
.tab-header {
  display: flex;
  margin-bottom: 10px;
  .header-item {
    cursor: pointer;
    margin-right: 10px;
    &.active {
      color: #999;
    }
    &:hover {
      color: #aaa;
    }
  }
}
.tab-list {
  display: grid;
  grid-template-columns: repeat(10, 40px);
  gap: 6px;
}
.extra {
  position: absolute;
  right: -5px;
  bottom: -20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  .money {
    margin-left: 5px;
    color: $--color-gold;
    i {
      margin-left: 5px;
    }
  }
  .giveMoney {
    margin-left: 5px;
    outline: 0;
    width: 80px;
    background: $--color-black-quarter;
    color: $--color-white;
  }
}
</style>
